// 组件通信


import React from "react"

// 子传父
// $emit + 自定义事件 -> 执行一个父组件中的函数 如果想要传递数据 调用函数的同时传递实参

/**
  <Son @get-title="父组件中的函数method"/>

  this.$emit('get-title', '数据')
 */

// react实现子传父 
// 1. 通过父传子传递一个类型为function的prop给子组件 2. 在子组件的内部执行这个function

// 子组件Son
const Son = ({ getTitle }) => {
  const sendTitle = () => {
    // 触发执行父组件传入的函数
    getTitle('这里是子组件中的数据title')
  }
  return (
    <div>
      this is son
      <button onClick={sendTitle}>send Title</button>
    </div>
  )
}


// 父组件App
class App extends React.Component {
  getTitle = (title) => {
    console.log('父组件中的函数被调用了', title)
  }
  render () {
    return (
      <div>
        <Son getTitle={this.getTitle} />
      </div>
    )
  }
}


export default App